<template>
  <div class="app-container">
    <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
    <crudOperation>
      <div slot="left">
        <div>
          <el-input v-model="crud.applyUserName" style="width:150px;display:inline-block;margin: 3px" placeholder="申请人"></el-input>
          <el-input v-model="crud.applyUserAreaName" style="width:150px;display:inline-block;margin: 3px" placeholder="申请人所属区域"></el-input>
          <el-date-picker
            v-model="query.applyDate"
            type="datetime"
            value-format="timestamp"
            format="yyyy-MM-dd HH:mm:ss"
            clearable
            placeholder="申请时间"
            style="width: 200px"
            class="filter-item"
            @keyup.enter.native="crud.toQuery"
          >
          </el-date-picker>
          <el-date-picker
            v-model="query.shippingDate"
            type="datetime"
            value-format="timestamp"
            format="yyyy-MM-dd HH:mm:ss"
            clearable
            placeholder="发货时间"
            style="width: 200px"
            class="filter-item"
            @keyup.enter.native="crud.toQuery"
          >
          </el-date-picker>
          <el-input v-model="crud.expressNo" style="width:150px;display:inline-block;margin: 3px" placeholder="快递单号"></el-input>
          <el-select v-model="query.logisticsStat" placeholder="发货状态" style="width:150px;display:inline-block;margin: 3px" clearable class="filter-item">
            <el-option v-for="item in dict.logistics_stat" :key="item.value" :label="item.label" :value="item.id"></el-option>
          </el-select>
          <el-button class="filter-item" size="mini" type="success" @click="materialApply">物料申请</el-button>
          <el-button class="filter-item" size="mini" type="success" @click="auditApply('pass')">审核通过</el-button>
          <el-button class="filter-item" size="mini" type="success" @click="auditApply('unPass')">审核不通过</el-button>
        </div>
      </div>
      <span slot="optsLeft">
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
      </span>
    </crudOperation>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" stripe :data="crud.data" size="small" style="width: 100%;" @selection-change="selectionChangeHandler">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="applyUserName" width="150" label="申请人"></el-table-column>
      <el-table-column prop="applyUserAreaName" width="150" label="申请人所属区域"></el-table-column>
      <el-table-column prop="applyDate" width="150" label="申请时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.applyDate, '{y}-{m}-{d}') }}
        </template>
      </el-table-column>
      <el-table-column prop="receiver" width="150" label="收件人"></el-table-column>
      <el-table-column prop="receiverPhone" width="150" label="联系电话"></el-table-column>
      <el-table-column prop="receiverAddress" width="150" label="收件地址"></el-table-column>
      <template v-if="headerList.length">
        <el-table-column
          v-for="item of headerList"
          :key="item.bomId"
          :prop="item.bomId"
          width="150"
          :label="item.bomName"
        >
          <template slot-scope="scope">
            <template v-for="z of scope.row.applyDetails">
              <span v-if="Number(z.bomId) === Number(item.bomId)" :key="z.bomId">{{ z.count }}</span>
            </template>
          </template>
        </el-table-column>
      </template>
      <el-table-column prop="auditStat" width="150" label="审核状态">
        <template slot-scope="scope">
          {{ dict.label.bom_audit_stat[scope.row.auditStat] }}
        </template>
      </el-table-column>
      <el-table-column prop="logisticsStat" width="150" label="发货状态">
        <template slot-scope="scope">
          {{ dict.label.logistics_stat[scope.row.logisticsStat] }}
        </template>
      </el-table-column>
      <el-table-column prop="shippingDate" width="150" label="发货时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.shippingDate, '{y}-{m}-{d}') }}
        </template>
      </el-table-column>
      <el-table-column prop="express" width="150" label="快递公司"></el-table-column>
      <el-table-column prop="expressNo" width="150" label="快递单号"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100px" align="center">
        <template slot-scope="scope">
          <a href="javascript:void(0);" style="color: #02A7F0;" @click="detailBomApply(scope.row)">详情</a>
          <a v-if="scope.row.auditStat === '01'" href="javascript:void(0);" style="color: #02A7F0;" @click="bomAuditApply(scope.row)">审核</a>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination></pagination>
    <detail-materila ref="materila"></detail-materila>
    <material-apply ref="materialapply" @boomApplySuccess="boomApplySuccess"></material-apply>
    <audit-materila ref="auditMaterial" @boomApplyAuditSuccess="boomApplySuccess"></audit-materila>
  </div>
</template>

<script>
import { query } from '@/api/bom';
import { boomApplyAuditBatch } from '@/api/bomApply';
import CRUD, { presenter, header, crud } from '@crud/crud';
import crudOperation from '@crud/CRUD.operation';
import pagination from '@crud/Pagination';
import { mapGetters } from 'vuex';
import detailMaterila from '@/views/material/detailMaterila';
import materialApply from '@/views/material/materialApply';
import auditMaterila from '@/views/material/auditMaterila';
import { PROCESS_EN_TYPE } from '@/utils/index';
export default {
  name: 'Meaterial',
  components: { pagination, crudOperation, detailMaterila, materialApply, auditMaterila },
  mixins: [presenter(), header(), crud()],
  dicts: ['logistics_stat', 'bom_audit_stat'],
  cruds() {
    return CRUD({
      title: '物料',
      url: '/oper/bomApply/queryPage',
      serverPath: PROCESS_EN_TYPE.VUE_APP_PRODUCT_API,
      sort: '',
      crudMethod: { },
      props: { searchToggle: false },
      optShow: { add: false, download: false, reset: false },
      optRightShow: {
        search: false,
        refresh: false
      }
    });
  },
  data() {
    return {
      headerList: [], // 物料清单
      applyList: [] // 审核清单
    };
  },
  computed: {
    ...mapGetters([
      'menusMap',
      'autoPath',
      'menusCode',
      'codes',
      'searchInfo'
    ])
  },
  watch: {
    searchInfo(newVal, oldVal) {
      console.warn(newVal.name, '||', oldVal.name);
    }
  },
  mounted() {
    query().then(res => {
      this.headerList = res;
    }).catch(er => {});
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true;
    },
    // 物料申请成功
    boomApplySuccess() {
      this.crud.toQuery();
    },
    // 详情
    detailBomApply(row) {
      this.$refs.materila.isShow(this.headerList, row);
    },
    // 物料申请
    materialApply() {
      this.$refs.materialapply.isShow(this.headerList);
    },
    // 复选框
    selectionChangeHandler(item) {
      this.applyList = item;
    },
    // 物料审核通过 // 物料审核不通过
    auditApply(pass) {
      if (!this.applyList.length) {
        return this.$notify.warning('请选择状态为“待审核”的申请单');
      }
      let flag = false;
      const params = {
        bomAuditStat: pass === 'pass' ? '02' : '03',
        remark: 'ok',
        bomApplyIds: []
      };
      this.applyList.forEach(item => {
        if (item.auditStat !== '01') {
          flag = true;
        }
        params.bomApplyIds.push(item.bomApplyId);
      });
      if (flag) {
        return this.$notify.warning('请选择状态为“待审核”的申请单');
      } else {
        boomApplyAuditBatch(params).then(res => {
          this.$notify.success('物料审核成功');
          this.boomApplySuccess();
        }).catch(er => {});
      }
    },
    // 单个审核
    bomAuditApply(row) {
      this.$refs.auditMaterial.isShow(this.headerList, row);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
